<script type="text/javascript">
	function showTab(id) {
		switch(id) {
			case 'control-Song':
				document.getElementById("tab-songhot").style.display="block";
				document.getElementById("control-Song").style.borderBottom="1px solid white";
				document.getElementById("tab-videohot").style.display="none";
				document.getElementById("control-Song").style.backgroundImage="none";
				document.getElementById("control-Song").style.backgroundColor="#ffffff";
				document.getElementById("control-Video").style.backgroundImage="url('http://localhost/CODE2012/MusicWeb/application/template/image/icon/tabcontrol.png')";
		
			break;
			case 'control-Video':
				document.getElementById("tab-songhot").style.display="none";
				document.getElementById("tab-videohot").style.display="block";
				document.getElementById("control-Video").style.borderBottom="1px solid white";
				document.getElementById("control-Video").style.backgroundImage="none";
				document.getElementById("control-Song").style.backgroundImage="url('http://localhost/CODE2012/MusicWeb/application/template/image/icon/tabcontrol.png')";
					document.getElementById("control-Video").style.backgroundColor="#ffffff";
			
			break;
		}
	}

</script>
<h3>Bảng Xếp Hạng</h3>
<div id="control-tabrank">
	<ul class="nav-tab">
		<li id="control-Song" class="control-tabitem" onclick="showTab(this.id);">Bài Hát</li>
		<li id="control-Video" class="control-tabitem" onclick="showTab(this.id);">Video</li>
	</ul>
</div>
<div id="navrank-tabcontent">
	<div id="tab-songhot" class="navright-tab">
		<ul>
			<?php 
			$itemSongHot=0;
			while ($itemSongHot<count($data_listSong_hot) ) {
				# code...
				echo "
				<li class='itemmusic-hot'>
				<div class='itemhot-play'>
					<p>".($itemSongHot+1)."</p>
				</div>
				<div class='itemhot-info'>
					<a href='{$url_path}nghe-nhac/{$data_listSong_hot[$itemSongHot]['title']}/{$data_listSong_hot[$itemSongHot]['idSong']}.html' class='itemhot-info-title'>{$data_listSong_hot[$itemSongHot]['strFileName']}</a>
					<p class='itemhot-info-artist'>
						<a href='{$url_path}nghe-sy/{$data_listSong_hot[$itemSongHot]['titleArtist']}.html' >{$data_listSong_hot[$itemSongHot]['strArtist']}</a>";
				if(strlen($data_listSong_hot[$itemSongHot]['strExtraArtist'])>0) {
					echo "- <a href=''>Lam Anh</a>";
				}		 
				echo "</p>
				</div>
				</li>
				";
				$itemSongHot++;

			}


			 ?>
		</ul>
	</div>
	<div id="tab-videohot" class="navright-tab">
		<ul>
			<?php 
			$itemVideoHot=0;
			while ($itemVideoHot<count($data_bxh_video)) {
				# code...
				echo "<li class='itemvideo-hot'>
				<div class='itemhot-play'>
					<p>".($itemVideoHot+1)."</p>
				</div>
				<div class='itemhot-info'>
					<a href='{$url_path}xem-video/{$data_bxh_video[$itemVideoHot]['titleVideo']}/{$data_bxh_video[$itemVideoHot]['idVideo']}.html' class='itemhot-info-title'>{$data_bxh_video[$itemVideoHot]['strFileName']}</a>
					<p class='itemhot-info-artist'>
						<a href='{$url_path}nghe-sy/{$data_bxh_video[$itemVideoHot]['titleArtist']}.html' >{$data_bxh_video[$itemVideoHot]['strArtist']}</a>";
				if(strlen($data_bxh_video[$itemVideoHot]['strExtraArtist'])) {
					echo " - <a href='{$url_path}nghe-sy/{$data_bxh_video[$itemVideoHot]['titleExtraArtist']}.html'>{$data_bxh_video[$itemVideoHot]['strExtraArtist']}</a>";
				}
				echo "</p></div></li>";
				
			$itemVideoHot++;
			}
			 ?>
		</ul>
	</div>
	
</div>

<script type="text/javascript">
	$(function(){
		console.log($('#wrapper-content').height());
		$('#content-navcenter').height($('#wrapper-content').height());
	});
</script>